<template>
	<view>
		<page-head headTitle="发表评价" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9 m-b12">
			<view class="p-t-b4 p-l-r3">
				<view class="flex align-center">
					<image :src="image" class="publish-pic m-r1 border-r1"></image>
					<text>{{name}}</text>
				</view>
				<view class="flex align-center p-t6 p-b6">
					<text class="fs-2 input-goods satisfied m-r1">满意度</text>
					<uni-rate value="0" color="#ececec" size="28" @change="change"></uni-rate>
				</view>
				<view>
					<textarea v-model="content" class="width p-l3 p-t-3 p-b2 publish-textarea" placeholder-class="fs-24" placeholder="您觉得TA怎么样？给别的驴友一个参考吧..."></textarea>
				</view>
			</view>
			<view class="p-l2 p-r2 bg-white padding-bottom p-b5 flex flex-wrap">
				<view style="position: relative;" v-for="(item,index) in album" :key="index" class="album m-b2">
					<image :src="item" :data-src="item" class="album-pic" @tap="previewImage">
					<view class="close" @tap="delect(index)"><image src="/static/images/icon_delete88.png" class="album-image"></view>
				</view>
				<image src="/static/images/upload-photos.png" @click="changeImgAlbum" class="upload-photos ml-2 m-r1">
			</view>
		</view>
		<view class="fixed fixed-bottom">
			<bright-button title="提交" @licekSubmit="licekSubmit"></bright-button>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue'
import border from '@/components/common/border.vue'
import brightButton from '@/components/common/bright-button.vue'
	export default {
		components:{
			pageHead,
			uniRate,
			border,
			brightButton
		},
		data() {
			return {
				orderSn:'',
				image:'',
				name:'',
				type:1,
				album:[],
				score:0,
				content:''
			}
		},
		onLoad(e) {
			console.log(e);
			this.orderSn = e.sn;
			this.image = e.images;
			this.name = e.name;
			this.type = e.type; //type即评价类型1普通订单、2定制订单、3预约订单
		},
		methods: {
			change(e){
				this.score = e.value;
			},
			clickLeftReturn(){
				uni.navigateBack({
				    delta: 1
				});
			},
			//上传相册
			changeImgAlbum(){
				var Token = uni.getStorageSync('token');
				//console.log(Token);
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'show'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								var arr = [];
								if(data.code == 1){
									this.album.push(data.data.url);
								}
								//console.log(this.album);	
							}
						});	
				    }
				});
			},
			//图片预览
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.album
				})	
			},
			//删除图片
			delect(index){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该图片？',
					success: (res) =>{
						console.log(res);
						if (res.confirm) {
							//删除数组中指定项
							function removeByValue(arr, val) {
								for(var i=0; i<arr.length; i++) {
									if(arr[i] == val) {
										arr.splice(i, 1);
										break;
									}
								}
							}
							var imageUrl = that.album.splice(index, 1)
							console.log(imageUrl);
							removeByValue(that.album, imageUrl);	
						} 
					}
				});
			},
			//提交评论
			licekSubmit(){
				this.$myRequest({
					method:'POST',
					url:'/api/customize/comment',
					data:{
						sn:this.orderSn,
						score:this.score,
						content:this.content,
						photos:this.album
					},
				}).then(res=>{
					//console.log(res);
				    uni.showToast({
				        title: '评论成功',
				        duration: 2000
				    });
					//5秒后返回到上一页
					setTimeout(function(){
						uni.redirectTo({
							url: '../custom-order/custom-order'
						})
					},5000);
				});
			}
		}
	}
</script>

<style>
page{background-color: #FFFFFF;}
.publish-pic{width: 90rpx;height: 90rpx;}
.satisfied{margin-top: -20rpx;}
.publish-textarea{background-color: #F3F3F3;}
.publish-addpic{width: 248rpx;height: 172rpx;}
.upload-photos{width: 202rpx;height: 200rpx;}
.album{width: 200rpx; height: 200rpx;margin-left:19rpx;margin-right: 19rpx;}
.album-pic{width: 100%; height: 200rpx;}
.close{position: absolute; top: 0;right: 0;width: 50rpx;height: 50rpx;}
.album-image{width: 100%;height: 50rpx;}
</style>
